[Windowsストアアプリ開発]ListViewを使ったサンプルの作成

Windowsストアアプリ開発

#Windows

#Windowsストアアプリ

#RIA

T君

2013.02.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

目次に移動

今回はListViewを使ったサンプルを作ってみました。サンプルは以下のように左側にListView、右側にWebViewを配置して、リストで選択したページをWebViewに表示するだけの簡単なものです。

画面を実装する

まずは新しくプロジェクトを作成してください。テンプレートは「新しいアプリケーション」にします。
作成できたら MainPage.xaml を開いて以下のように実装してください。

<Page
    x:Class="SampleListView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleListView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="350"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <ListView x:Name="MyListView" Margin="0,10,0,0"
                  ItemTemplate="{StaticResource Standard130ItemTemplate}"
                  SelectionChanged="MyListView_SelectionChanged"/>
        <WebView x:Name="MyWebView" Grid.Column="1"/>
    </Grid>
</Page>

ListViewのItemTemplateとは

ItemTemplateとはListViewの1行の中のレイアウトを定義したものです。Adobe FlexでいえばItemRenderer、AndroidではArrayAdapterのようなものでしょうか。
サンプルの ItemTemplate プロパティに設定されている Standard130ItemTemplate はCommonフォルダの中にある StandardStyles.xaml の中で定義されています。
StandardStyles.xamlでは以下のようなテンプレートが用意されています。これらのテンプレートはListViewだけでなく、GridViewなどでも利用できます。

Standard130ItemTemplate

サンプルで使われているテンプレートです。

Standard250x250ItemTemplate

正方形のテンプレートです。横幅が固定です。概要(Description)を表示できません。

Standard500x130ItemTemplate

長方形のテンプレートです。横幅が固定です。

Standard80ItemTemplate

長方形のテンプレートです。概要(Description)を表示できません。

StandardSmallIcon300x70ItemTemplate

長方形のテンプレートです。横幅が固定です。画像のサイズが小さめです。

StandardSmallIcon70ItemTemplate

長方形のテンプレートです。画像のサイズが小さめです。

ItemTemplateはListViewのプロパティから変更できます。右の赤枠の部分をクリックしてください。

ローカルリソースから選択できます。

データモデルを実装する

次にListViewの行毎に代入するデータ型を定義します。プロジェクトにDataModelというフォルダを追加してその中にSampleDataItem.csというファイルを作成して下さい。
このクラスのインスタンスをObservableCollectionオブジェクトに詰めてListViewのItemsSourceプロパティに代入します。
Title, SubTitle, Image, Descriptionはテンプレートが使う情報です。上記のテンプレートであれば共通で使えます。
今回のサンプルではWebViewに表示するページのURLを持たす必要があるのでUrlプロパティを追加しました。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace SampleListView.DataModel
{
    class SampleDataItem
    {
        private static Uri _baseUri = new Uri("ms-appx:///");

        public SampleDataItem(String title, String subtitle, String imagePath,
        	String description, String url)
        {
            this._title = title;
            this._subtitle = subtitle;
            this._imagePath = imagePath;
            this._description = description;
            this._url = url;
        }

        private string _title = string.Empty;
        public string Title
        {
            get { return this._title; }
            set { this._title = value; }
        }

        private string _subtitle = string.Empty;
        public string Subtitle
        {
            get { return this._subtitle; }
            set { this._subtitle = value; }
        }

        private string _description = string.Empty;
        public string Description
        {
            get { return this._description; }
            set { this._description = value; }
        }

        private ImageSource _image = null;
        private String _imagePath = null;
        public ImageSource Image
        {
            get
            {
                if (this._image == null && this._imagePath != null)
                {
                    this._image = new BitmapImage(new Uri(_baseUri, this._imagePath));
                }
                return this._image;
            }

            set
            {
                this._imagePath = null;
                this._image = value;
            }
        }

        public void SetImage(String path)
        {
            this._image = null;
            this._imagePath = path;
        }

        private string _url = string.Empty;
        public string Url
        {
            get { return this._url; }
            set { this._url = value; }
        }
    }
}

ListViewにデータを代入する処理を実装する

次にMainPage.xaml.csを実装します。起動時にListViewのItemsSourceに代入するデータを生成しています。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    MyListView.ItemsSource = createItems();
}

private ObservableCollection<SampleDataItem> createItems()
{
    var items = new ObservableCollection<SampleDataItem>();
    items.Add(new SampleDataItem("WordPressでFacebookページを作ろう(1)",
            "WordPressを使ったFacebookページ作成と更新：基礎編",
            "Assets/Logo.png",
            "企業が活用したいソーシャルサービス、Facebook。WordPressを使ってFacebookページを作る方法を紹介します。",
            "http://www.atmarkit.co.jp/fwcr/design/tool/fbpress01/01.html"));

    items.Add(new SampleDataItem("Scala＋Play 2.0でWebアプリ開発入門（1）",
            "Play framework 2.0の概要／5つの特徴とScalaで作るための環境構築",
            "Assets/Logo.png",
            "2.0からScalaに対応したWebアプリ開発の人気軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載。",
            "http://www.atmarkit.co.jp/ait/articles/1210/26/news018.html"));

    items.Add(new SampleDataItem("【図解】Xcode 4.5の使い方リファレンス超まとめ",
            "WinユーザーがiPhoneアプリを作るためのMacの基礎",
            "Assets/Logo.png",
            "Mac初心者を対象に基本的なOS Xの使い方などをWindowsと比較しながら解説。",
            "http://www.atmarkit.co.jp/ait/articles/1212/05/news022.html"));

    return items;
}

ListViewの行を選択した際の処理を実装する

ListViewを選択した際の処理です。ListViewを選択した場合のイベントはSelectionChangedイベントです。
SelectedItemプロパティから選択中のアイテムを取得してWebViewのNavigateメソッドの引数にUriオブジェクトを渡しています。

private void MyListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    SampleDataItem item = (SampleDataItem)MyListView.SelectedItem;
    MyWebView.Navigate(new Uri(item.Url));
}

目次に移動